<template>
  <Layout class="layout">
    <Logo slot="logo" />
    <Header slot="head" />
    <Sider slot="side" />
    <Theme slot="theme" v-if="isChangeTheme" />
    <Bread slot="bread" v-if="isBread" />
    <a-layout-content class="content" slot="main">
      <a-skeleton active :loading="loading">
        <router-view/>
      </a-skeleton>
    </a-layout-content>
  </Layout>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  import { namespace, State } from 'vuex-class'
  import Layout from '@/components/Layout/Layout.vue'
  import Sider from '@/components/Layout/Sider.vue'
  import Header from '@/components/Layout/Header.vue'
  import Logo from '@/components/Layout/Logo.vue'
  import Theme from '@/components/Layout/Theme.vue'
  import Bread from '@/components/Layout/Bread.vue'

  const Preference = namespace('preference')

  @Component({
    components: {
      Layout,
      Sider,
      Header,
      Logo,
      Theme,
      Bread
    }
  })
  export default class Manage extends Vue {
    @Preference.State("isChangeTheme")
    private isChangeTheme: boolean | undefined

    @Preference.State("isBread")
    private isBread: boolean | undefined

    @State("loading")
    private loading: boolean | undefined
  }
</script>

<style lang="scss">
  .layout {
    height: 100vh;
    .content {
      margin: 24px 16px;
      padding: 24px;
      background: #fff;
      min-height: 280px;
    }
  }
</style>
